<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Titbit Post</title>
  <link rel="stylesheet" href="/static/css/concise.min.css">
  <link rel="stylesheet" href="/static/css/style.css">
</head>
<body>
  <div container>
    
    <div style="margin-top: 1rem;"></div>

    <div grid>

      <div column></div>

      <div column='10'>
        <p class="small-text" style="line-height: 158%;padding:0.5rem;">
          当你使用提交按钮请求，会使用浏览器默认的请求行为，并且会进行页面的跳转，早期的页面都是这样的设计。
          现在流行的异步请求无论从用户体验还是前后端请求优化都比默认的方案要好得多。
        </p>
        <form action="/d" method="post">
          <input type="text" placeholder="text" name="text" oninput="cacheInput(this);">
          <div class="align-center" style="margin-top: 0.5rem;">
            <input type="submit" value="提交">
          </div>
        </form>
        <div class="align-right">
          <button onclick="postData();" class="blue">异步请求</button>
        </div>
        <p id="ret-content"></p>
        <p id="ret-error" class="small-text"></p>

        <form action="/file" method="post" enctype="multipart/form-data">
          <input type="file" name="file">
          <input type="submit" value="Upload">
        </form>

      </div>

      <div column></div>

    </div>
  </div>

  <script>
    let host = `${location.protocol}//${location.host}`

    let _cache = {text : ''}

    function cacheInput(t) {
      _cache.text = t.value
    }

    function postData() {
      fetch(`${host}/d`, {
        method: 'POST',
        headers : {
          'content-type' : 'text/json'
        },
        body : JSON.stringify(_cache)
      })
      .then(res => {
        if (res.ok) {
          return res.text()
        }
        throw new Error(`${res.status} : ${res.statusText}`)
      })
      .then(resText => {
        document.getElementById('ret-content').innerHTML = resText
      })
      .catch(err => {
        document.getElementById('ret-error').innerHTML = err.message
      })
    }

  </script>

</body>
</html>